<!--
 * @Description: 长来扫码付款页面余额绑定手机号,该页面只做绑定
 * @Author: Kerwin
 * @Date: 2025-06-09 17:38:48
 * @LastEditTime: 2025-07-11 15:37:44
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="bindPhone">
    <u-form :model="form" ref="formRef">
      <u-form-item label="手机号" prop="phone" label-width="120">
        <u-input
          placeholder="请输入联系电话"
          v-model="form.phone"
          type="number"
          :maxlength="11"
          @blur="validatePhone"
        />
      </u-form-item>
      <view
        v-if="phoneError"
        style="color: red; font-size: 24rpx; text-align: left"
      >
        {{ phoneError }}</view
      >
      <u-form-item label="验证码" prop="code" label-width="120">
        <u-input
          v-model="form.code"
          type="number"
          :maxlength="6"
          placeholder="请输入验证码"
        />
        <u-verification-code
          :seconds="seconds"
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>
        <u-button @tap="getCode" size="mini" plain type="success" ripple>{{
          tips
        }}</u-button>
      </u-form-item>
    </u-form>
    <u-button
      :disabled="form.code === '' || phoneErrorStatus"
      style="margin: 30rpx 0"
      type="primary"
      @click="show = true"
      >绑定手机号</u-button
    >
    <!-- <button @click="handleBack">返回</button> -->
    <!-- 确认弹窗 -->
    <u-modal
      v-model="show"
      title="温馨提示"
      show-cancel-button
      @confirm="onsubmit"
      :content="content"
    >
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onLaunch } from '@dcloudio/uni-app'
//api
import { userApi, baseApi, enumAll } from '@/api'
//工具
import debounce from 'lodash/debounce'

// 初始化数据
const show = ref(false)
const content = ref('是否确认绑定该手机号')
const phone = ref('')
const phoneStatus = ref(1) //1绑定手机号，2将账号合并
const username = ref('') //1绑定手机号，2将账号合并
const code = ref('')
const phoneError = ref('')
const phoneErrorStatus = ref(true)
const form = reactive({
  password: '',
  code: '',
  phone: '',
  inviteCode: ''
})
const uCode = ref()
const tips = ref('获取验证码')
const seconds = ref(60)
//小提示
const shouldShowMergeTip = computed(() => {
  return phoneStatus.value === 2 && !phoneErrorStatus.value
})
const tempObj = ref()
// 校验电话号码的方法
const validatePhone = async () => {
  const phoneRegex = /^1[3-9]\d{9}$/ // 中国大陆手机号正则表达式
  console.log(form.phone, '111')

  if (!form.phone) {
    phoneError.value = '联系电话不能为空'
    phoneErrorStatus.value = true
  } else if (!phoneRegex.test(form.phone)) {
    console.log(1)

    phoneError.value = '请输入有效的手机号码'
    phoneErrorStatus.value = true
  } else {
    phoneError.value = '' // 清除错误信息
    phoneErrorStatus.value = false
    const { data } = await userApi.userList({
      phone: form.phone
    })
    console.log(data, '用户信息')
    content.value = '是否确认绑定该手机号'
    phoneStatus.value = 1
  }
}

function codeChange(text: string) {
  tips.value = text
}
//下载app
function toDownload() {
  window.open('https://www.blacksilverscore.com/download/index.html')
}
//发送验证码
async function getCode() {
  console.log('发送验证码', form.phone)

  if (phoneErrorStatus.value) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  if (uCode.value.canGetCode) {
    try {
      const { data } = await baseApi.smsSend({
        type: enumAll.sms_enum_type.BindPhoneCode,
        phone: form.phone
      })
      uCode.value.start()
    } catch {}
  }
}
const handleBack = () => {
  if (tempObj.value.isSmfk == 1) {
    // 跳转长来扫码付款页面
    uni.navigateTo({
      url: `/pages/physicalShopCheck/index?qrcode=${tempObj.value.qrcode}&shopId=${tempObj.value.shopId}&shareCode=${tempObj.value.shareCode}`
    })
  } else {
    // 跳转门店点击付款页面
    uni.navigateTo({
      url: `/pages/physicalShopCheck/index?shopId=${tempObj.value.shopId}`
    })
  }
}
//提交
const onsubmit = async () => {
  console.log(phoneErrorStatus.value, '1111')
  if (!phoneErrorStatus.value) {
    console.log(
      '提交绑定',
      String(form.phone),
      String(form.code),
      phoneStatus.value
    )

    const { msg } = await userApi.UserBindPhoneAndMerge({
      phone: form.phone.toString(),
      code: form.code.toString(),
      status: 1
    })
    console.log('提交绑定成功', msg)
    if (msg === '操作成功') {
      uni.showToast({
        title: msg,
        icon: 'success'
      })
      // 跳转长来扫码付款页面
      handleBack()
    } else {
      uni.showToast({
        title: '绑定失败',
        icon: 'error'
      })
    }
  } else {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
  }
}
onLoad((option: any) => {
  console.log('长来option', option)
  tempObj.value = option
})
</script>

<style lang="scss" scoped>
.bindPhone {
  padding: 30rpx;
  text-align: center;
  /* background-color: #FAB791; */
  // background: linear-gradient(#f9ceb5 0%, rgba(255, 250, 224, 0) 100%);
  height: 100vh;

  .telInpt {
    margin: 200rpx 0;

    .phoneCss {
      margin: 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

:deep(.uni-input-placeholder) {
  color: gray !important;
}
</style>
